<template>
  <a-modal
    :title="modalTitle"
    :width="640"
    :visible="visible"
    :maskClosable="false"
    :confirmLoading="loading"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-spin :spinning="loading">
      <a-form-model
        :model="model"
        v-bind="formLayout"
        ref="ruleForm"
        :rules="rules"
        @submit.native.prevent>
        <a-form-model-item
          label="管理员账号"
          prop="name">
          <a-input size="large" v-model="model.name" />
        </a-form-model-item>
        <a-form-model-item
          label="用户名"
          prop="username">
          <a-input size="large" v-model="model.username" />
        </a-form-model-item>
        <a-form-model-item
          label="管理员密码"
          prop="password">
          <a-input size="large" v-model="model.password" type="password" />
        </a-form-model-item>
        <a-form-model-item
          label="确认密码"
          prop="confirmpassword">
          <a-input size="large" v-model="model.confirmpassword" type="password" />
        </a-form-model-item>
        <a-form-model-item
          label="手机号码"
          prop="phone">
          <a-input size="large" v-model="model.phone" />
        </a-form-model-item>
        <a-form-model-item
          label="性别"
          prop="gender">
          <a-radio-group v-model="model.gender">
            <a-radio :value="1">男</a-radio>
            <a-radio :value="0">女</a-radio>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item
          label="管理员状态"
          prop="status">
          <a-radio-group v-model="model.status">
            <a-radio :value="1">开启</a-radio>
            <a-radio :value="0">关闭</a-radio>
          </a-radio-group>
        </a-form-model-item>
      </a-form-model>
    </a-spin>
  </a-modal>
</template>

<script>
// 表单字段
const fields = ['roleId', 'roleName', 'status', 'phone', 'password', 'gender', 'confirmpassword', 'username']

export default {
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    model: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    this.formLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 13 }
      }
    }
    const validatePass = (rule, value, callback) => {
      if (this.id) { // 修改时如果输入确认密码，则密码必填
        if (value === '') {
          if (this.model.confirmPassword !== '') {
            callback(new Error('密码必填'))
          }
          callback()
        } else {
          if (this.model.confirmPassword !== '') {
            this.$refs.ruleForm.validateField('confirmPassword')
          }
          callback()
        }
      } else {
        if (value === '') {
          callback(new Error('密码必填'))
        } else {
          if (this.model.confirmPassword !== '') {
            this.$refs.ruleForm.validateField('confirmPassword')
          }
          callback()
        }
      }
    }
    const validatePass2 = (rule, value, callback) => {
      if (this.id) { // 修改时如果输入密码，则确认密码必填
        if (value === '') {
          if (this.model.password !== '') {
            callback(new Error('请再次输入密码'))
          }
          callback()
        } else if (value !== this.model.password) {
          callback(new Error('两次密码不一致'))
        } else {
          callback()
        }
      } else {
        if (value === '') {
          callback(new Error('请再次输入密码'))
        } else if (value !== this.model.password) {
          callback(new Error('两次密码不一致'))
        } else {
          callback()
        }
      }
    }
    return {
      loading: false,
      modalTitle: '添加管理员',
      rules: {
        menuTitle: [{ required: true, message: '管理员账号必填', trigger: ['blur', 'change'] }],
        name: [
        { required: true, message: '请输入账号', trigger: ['blur', 'change'] }, { min: 3, max: 10, message: '账号名必须3到10', trigger: ['blur'] }],
        status: [{ required: true, message: '状态必选', trigger: ['blur', 'change'] }],
        phone: [{ required: true, message: '请输入手机号码', trigger: ['blur', 'change'] }, { min: 1, max: 11, message: '手机号码必须1到11', trigger: ['blur'] }],
        password: [{ validator: validatePass, trigger: ['blur', 'change'] }, { min: 6, max: 11, message: '密码6-18字符', trigger: ['blur'] }],
        confirmPassword: [{ validator: validatePass2, trigger: ['blur', 'change'] }],
        username: [{ required: true, message: '用户名必填', trigger: ['blur', 'change'] }, { min: 1, max: 6, message: '用户名必须1-6', trigger: ['blur'] }],
        gender: [{ required: false, trigger: ['blur', 'change'] }]
      },
      form: this.$form.createForm(this),
      menuLists: []
    }
  },
  created () {
    // 防止表单未注册
    fields.forEach(v => this.form.getFieldDecorator(v))
  },
  mounted () {
  },
  methods: {
    // 弹出框-确定
    handleOk (e) {
      const {
        handleFormData
      } = this
      this.loading = true
      // 验证表单
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.model.authorityId ? handleFormData('/authorities/' + this.model.authorityId) : handleFormData('/authorities/add')
        } else {
          const _this = this
          setTimeout(() => {
            _this.loading = false
          }, 600)
        }
      })
    },
    // 弹出框-取消
    handleCancel (e) {
      // 重置表单数据
      this.$refs.ruleForm.resetFields()
      this.$emit('cancel')
    },
    // 表单数据处理
    handleFormData (url) {
      this.$common.handlePost(url, this.model)
        .then(res => {
          if (res.code === 200) {
            this.$message.success(res.message, 1, () => {
              // 重置表单数据
              this.$refs.ruleForm.resetFields()
              // 关闭弹框
              this.$emit('ok')
            })
          } else {
            this.$message.error(res.message)
          }
        })
        .catch(() => {
          this.$notification.error({
            message: '错误',
            description: '请求信息失败，请重试'
          })
        })
        .finally(() => {
          this.loading = false
        })
    }
  },
  watch: {
    model (newVal, oldVal) {
      if (newVal.roleId) this.modalTitle = '修改角色'
      else this.modalTitle = '添加管理员'
    }
  }
}
</script>
